
<template>
  <div class="wrap">
        <el-button class="add-btn fr" icon="el-icon-edit" @click="addBanner">添加</el-button>

    <el-table
      class="table"
      border fit highlight-current-row
      v-loading="loading"
      element-loading-text="加载中"
      element-loading-spinner="el-icon-loading"
      :data="tableData"
      style="width: 100%">
      <el-table-column
          align="center"
          type="index"
          label="编号"
          width="50">
      </el-table-column>
      <el-table-column
          align="center"
          prop="bannerImgUrl"
          label="Banner图片">
           <template slot-scope="scope" >
            <a :href="scope.row.bannerImgUrl" target="_blank">
              <img v-if="scope.row.bannerImgUrl" :src="scope.row.bannerImgUrl" class="avatar" style="margin:auto">
            </a>
          </template>
      </el-table-column>
      <el-table-column
          align="center"
          prop="productName"
          label="产品名称">
      </el-table-column>
      <el-table-column
          align="center"
          width="100"
          label="状态">
           <template slot-scope="scope">
            <p>{{statusMapping[scope.row.status + '']}}</p>
          </template>
      </el-table-column>
      <el-table-column
          align="center"
          width="200"
          label="时间">
          <template slot-scope="scope">
            {{_mapping.date_format(scope.row.createTime)}}
          </template>
      </el-table-column>
        <el-table-column
        width="250"
        align="center"
        label="操作">
        <template slot-scope="scope">
            <el-button size="small" @click="modifyBanner(scope.row)">编辑</el-button>
        </template>
      </el-table-column>
    </el-table>

 <el-dialog :title="dialogTitle" :close-on-click-modal="false" :visible.sync="dialogVisible" width="30%" class="dialog">
      
       <el-row class="line">
        <el-col>
          <span class="label"><span class="red">*</span>产品名称</span>
          <el-select v-model="addData.productId"  style="width:120px;">
            <el-option
            v-for="item in productOption"
            :key="item.value"
            :label="item.label"
            :value="item.value">
            </el-option>
          </el-select>
        </el-col>
      </el-row>

       <el-row class="line">
          <span class="label"><span class="red">*</span>Banner图片</span>
           <el-upload
            class="avatar-uploader"
            :action="getUploadOss()"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload">
            <img v-if="addData.bannerImgUrl" :src="addData.bannerImgUrl
            " class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
      </el-row>

       <el-row class="line">
        <el-col>
          <span class="label"><span class="red">*</span>开启状态</span>
          <el-select v-model="addData.status" placeholder="开启状态" style="width:120px;" >
            <el-option
            v-for="item in statusOption"
            :key="item.value"
            :label="item.label"
            :value="item.value">
            </el-option>
          </el-select>
        </el-col>
      </el-row>

      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="confirmClick">确 定</el-button>
      </span>
    </el-dialog>

    <el-pagination
      class="pagination"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="query.pageNum"
      :page-sizes="[30, 40, 50, 60]"
      :page-size="query.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="totalNum">
    </el-pagination>
  </div>
</template>
<script>
import _banner from '@/services/banners.js'
import _base from '@/services/base.js'
export default {
  data(){
    return {
      productOption:[],
      statusMapping: {
        '0': '关闭',
        '1': '启用'
      },
      loading: false,
      tableData: [],
      query: {
        pageSize: 30,
        pageNum: 1
      },
      totalNum: 0,
      dialogTitle:'新增',
      dialogVisible: false,
      addData:{
        id:'',
        productId:'',
        productName:'',
        status: 0,
        bannerImgUrl:''
      },
      statusOption: [{
        value: 1,
        label:'开启'
      },{
        value: 0,
        label:'关闭'
      }],
    }
  },
  methods: {
     // 获取产品下啦
    getProductList(){
        _base.getProductList()
        .then(res => {
            console.log('res', res.data)
            if(res.data && res.data.length){
                res.data.map(json => {
                    let item = {}
                    item.value = json.id
                    item.label = json.name
                    this.productOption.push(item)
                })
            }
        })
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.query.pageSize = val
      this.getList()
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.query.pageNum = val
      this.getList()
    },
    getList(){
      let params = {
        "pageNum": this.query.pageNum,
        "pageSize": this.query.pageSize
      }
      _banner.getBannerList(params)
      .then(res => {
        this.tableData = res.data.list
        this.totalNum = res.data.total
      })
    },
    addBanner(){
        this.dialogVisible=true
        this.dialogTitle = '添加'
        this.addData ={
          id : '',
          productId: '',
          productName: '',
          status: 0,
          bannerImgUrl:''

        }
    },
    modifyBanner(item){
      this.dialogVisible = true
      this.dialogTitle = '编辑'
      this.addData = {
        id : item.id,
        productId: item.productId,
        status: item.status,
        bannerImgUrl: item.bannerImgUrl
      }
    },
    confirmClick(){
      let params = this.addData
       if (this.dialogTitle === '添加') {
          _banner.addBanner(params)
            .then(res => {
                console.log('res', res.data)
                if(res.data.code === 200){
                    this.$msg.success('添加成功')
                    this.dialogVisible = false
                    this.getList()
                }else{
                    this.$msg.error(res.data.msg)
                }
            })
        } else {
          _banner.updateBanner(params)
            .then(res => {
                console.log('res', res.data)
                if(res.data.code === 200){
                    this.$msg.success('修改成功')
                    this.dialogVisible = false
                    this.getList()
                }else{
                    this.$msg.error(res.data.msg)
                }
            })
        } 

    },
     getUploadOss(){
      console.log('_base.uploadToOss()', _base.uploadToOss())
      return _base.uploadToOss()
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg'
      const isPNG = file.type === 'image/png'
      const isGIF = file.type === 'image/gif'
      const isLt2M = file.size / 1024 / 1024 < 2

      if (!isJPG && !isPNG && !isGIF) {
        this.$msg.error('上传图片只能是 JPG/PNG/GIF 格式!')
      }
      if (!isLt2M) {
        this.$msg.error('上传图片大小不能超过 2MB!')
      }
      return (isJPG || isPNG || isGIF) && isLt2M
    },
    handleAvatarSuccess(res, file) {
      console.log('res', res)
      if (res.code === 200) {
        this.addData.bannerImgUrl = `https://chaolehua-main.oss-cn-shenzhen.aliyuncs.com/${res.result}`
      }
      console.log('this.addData.bannerImgUrl', this.addData.bannerImgUrl)
     }
  },
  created(){
    this.getList()
    this.getProductList()
  }
}
</script>
<style lang="scss" scoped>
@import '~styles/variables.scss';
.wrap{
  .table{
    margin-top: 10px;
    margin-bottom: 25px;
  }
  .add-btn{
    width: 100px;
    background: $theme-color;
    color: #fff;
    font-size: 14px;
    margin-top: 5px;
  }
   .red{
    color: #f00;
  }
   .dialog{
    .line{
        margin-bottom: 15px;
    }
    .label{
        width:100px;
        display: inline-block;
        text-align: right;
        margin-right: 5px;
        font-size: 12px;
    }
  }
}
.avatar {
    width: 80px;
    height: 80px;
    display: block;
}
 .avatar-uploader{
    display: inline-block;
    border-radius: 6px;
    border: 1px dotted #ccc;
  }
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 80px;
    height: 80px;
    line-height: 80px;
    text-align: center;
  }

</style>